<template>
    <div class="setting">
        <a-collapse v-model="activeKey">
            <a-collapse-panel key="1" header="基本信息">
                <ul class="d-flex justify-content-around align-items-center flex-wrap">
                    <li>员工姓名: 王朗</li>
                    <li>性别: 男</li>
                    <li>年龄: 70</li>
                    <li>员工权限: 管理员</li>
                    <li>员工工号: 3745734070715</li>
                    <li>宿舍地址: 6栋3单元302室</li>
                </ul>
            </a-collapse-panel>
            <a-collapse-panel key="2" header="账号信息">
                <div class="d-flex flex-column w-75 mx-auto">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>账号名称: 王朗</div>
                        <div>用户账号: 1708394751</div>
                    </div>
                    <div class="my-3 d-flex justify-content-between align-items-center">
                        <div>
                            标签选择:
                            <a-select
                                mode="tags"
                                placeholder="Please select"
                                style="width: 200px"
                                :default-value="['a1','b2']"
                                @change="handleChange"
                            >
                                <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                                    {{ (i + 9).toString(36) + i }}
                                </a-select-option>
                            </a-select>
                        </div>
                        <div>
                            <a-tag closable color="purple"><span style="vertical-align: middle;">标签1</span></a-tag>
                            <a-tag closable color="cyan"><span style="vertical-align: middle;">标签2</span></a-tag>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div>账号密码: <a-button type="primary" class="ml-3">修改密码</a-button> </div>
                        <div>关联邮箱: 1708394751@qq.com  <a-button type="primary" class="ml-3">绑定邮箱</a-button></div>
                    </div>
                    <div class="mb-3">
                        <div class="mb-2">个人留言: </div>
                        <a-input v-model="desc" type="textarea" style="height: 100px;"/>
                    </div>
                    <div class="d-flex align-items-center">
                        <div style="width: 80px;">账号头像: </div>
                        <a-upload
                            name="avatar"
                            list-type="picture-card"
                            class="avatar-uploader"
                            :show-upload-list="false"
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            :before-upload="beforeUpload"
                            @change="handleChange"
                        >
                            <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                            <div v-else>
                                <a-icon :type="loading ? 'loading' : 'plus'" />
                                <div class="ant-upload-text">
                                    Upload
                                </div>
                            </div>
                        </a-upload>
                    </div>
                </div>
            </a-collapse-panel>
            <a-collapse-panel key="3" header="其他信息一">
                <p>{{ text }}</p>
            </a-collapse-panel>
            <a-collapse-panel key="4" header="其他信息二">
                <p>{{ text }}</p>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>

<script>
function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}
export default {
    name: "Setting",
    data(){
        return{
            text: ``,
            activeKey: ["1","2"],
            desc: "",
            loading: false,
            imageUrl: '',
        }
    },
    methods:{
        handleChange(info) {
            if (info.file.status === 'uploading') {
                this.loading = true;
                return;
            }
            if (info.file.status === 'done') {
                // Get this url from response in real world.
                getBase64(info.file.originFileObj, imageUrl => {
                    this.imageUrl = imageUrl;
                    this.loading = false;
                });
            }
        },
        beforeUpload(file) {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                this.$message.error('You can only upload JPG file!');
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('Image must smaller than 2MB!');
            }
            return isJpgOrPng && isLt2M;
        }
    }
}
</script>

<style scoped>
.setting ul li{
    margin: 10px 50px;
}
.avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
}
.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
</style>